<template>
	<view>
		<shopCar :list="list"  @refresh="refresh" class="shopCar"></shopCar>
	</view>
</template>
<script>
	import shopCar from '../../components/bbh-shopCar/shopCar.vue';
	export default {
		onLoad() {
			var _this = this;
			_this.init();
		},
		data() {
			return {
				list : [	//这里的check后台如果没有给相关参数判断，自己拿到接口数据后，可以增加一个这样的对象；
					{ID:0,name:"苹果",check:false,price:12,count:1,stock:5},
					{ID:1,name:"香蕉",check:false,price:30,count:1,stock:15},
					{ID:2,name:"橘子",check:false,price:20,count:1,stock:3},
					{ID:3,name:"葡萄",check:false,price:5,count:1,stock:2},
					{ID:4,name:"火龙果",check:false,price:10,count:1,stock:6}
				]
			}
		},
		methods:{
			refresh(data){			//刷新数据
				this.list = data;
			},
			init(){					//上面是模拟数据，正常接口拿数据获取list
				// 	uni.request({
				// 		url : "",
				// 		data:{},
				// 		method: 'POST',
				// 		header : {'content-type':'application/x-www-form-urlencoded',"Access-Control-Allow-Origin":"*","Access-Control-Allow-Credentials":"true","Access-Control-Allow-Methods":"*","Access-Control-Allow-Headers":"Content-Type,Access-Token"},
				// 		dataType: 'json',
				// 		success: function (data) {	
				// 			data.forEach((item)=>{				//data实际根据你的数据类型对象来
				// 				_this.$set(item,"check",false); //每条数据增加一个check字段；
				// 			});
				// 			_this.list = data;
				// 			console.log(JSON.stringify(_this.list));
				// 		}
				// 	})
			}
		},
		components:{
			shopCar
		}
	}
</script>
<style scoped>
	/*
		购物车---这里容器样式不要放组件里，不然侧滑官方自带的样式不会生效;
		侧滑按钮样式，高度跟容器保持一致就行这里是160,宽自己根据项目来
	*/
	.shopCar >>> .uni-swipe-action__container {
		position: relative;
		background-color: #fff;
		width: 200%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
		height:160rpx !important;
		margin-top: 40rpx !important;
	}
	
	
	/* 删除按钮的样式 */
	.shopCar >>> .uni-swipe-action--btn {
		padding: 0 32upx;
		color: #fff;
		display: inline-flex;
		text-align: center;
		flex-direction: row;
		align-items: center;
		width:200rpx !important;
		height:160rpx !important;
		background:rgba(233,82,66,1) !important;	
		border-radius:32rpx 0px 0px 32rpx;
		padding: 0rpx !important;
		font-weight:bold !important;
		font-size: 32rpx !important;
		padding-left: 48rpx !important;
		box-sizing: border-box;
	}
</style>